<ons-page>
    <ons-toolbar>
        <div class="left">
            <ons-back-button>返回</ons-back-button>
        </div>
        <div class="center">Tabbar 标签栏</div>
    </ons-toolbar>

    <div class="content-wrapper" style="padding: 20px; background: white;">
        <div class="info-box">
            <div style="display: flex; align-items: center;">
                <ons-icon icon="md-view-module" class="info-box-icon"></ons-icon>
                <div>
                    <div class="info-box-title">Tabbar 组件</div>
                    <div class="info-box-content">底部标签栏，用于应用主导航</div>
                </div>
            </div>
        </div>
    </div>

    <ons-tabbar swipeable position="auto">
        <ons-tab page="tab1.html" label="首页" icon="md-home" active></ons-tab>
        <ons-tab page="tab2.html" label="搜索" icon="md-search"></ons-tab>
        <ons-tab page="tab3.html" label="通知" icon="md-notifications" badge="5"></ons-tab>
        <ons-tab page="tab4.html" label="我的" icon="md-account-circle"></ons-tab>
    </ons-tabbar>

    <template id="tab1.html">
        <ons-page>
            <div style="padding: 20px; text-align: center;">
                <p style="margin-top: 50px;">
                    <ons-icon icon="md-home" size="80px" style="color: #4a90e2;"></ons-icon>
                </p>
                <h2>首页</h2>
                <p style="color: #666; margin-top: 20px;">
                    这是首页标签的内容。
                </p>
                <p style="margin-top: 30px;">
                    <ons-button onclick="showTabToast('首页')">点击测试</ons-button>
                </p>

                <!-- 完整代码显示 -->
                <div style="margin-top: 40px; text-align: left;">
                    <div class="code-example-container">
                        <div class="code-actions" onclick="toggleCode('all-tabbar-code')">
                            <div class="code-actions-left">
                                <ons-icon id="icon-all-tabbar-code" icon="md-chevron-down"></ons-icon>
                                <span>查看完整代码</span>
                            </div>
                            <div class="code-actions-right">
                                <button class="code-action-btn" id="copy-btn-all-tabbar-code" onclick="event.stopPropagation(); copyCode('all-tabbar-code')">
                                    <ons-icon icon="md-copy"></ons-icon>
                                    <span class="btn-text">复制</span>
                                </button>
                            </div>
                        </div>
                        <div class="code-display" id="code-all-tabbar-code">
                            <pre><code id="code-content-all-tabbar-code">&lt;!-- ==================== HTML ==================== --&gt;
&lt;ons-page&gt;
    &lt;ons-toolbar&gt;
        &lt;div class="center"&gt;Tabbar 标签栏&lt;/div&gt;
    &lt;/ons-toolbar&gt;

    &lt;!-- Tabbar 定义 --&gt;
    &lt;ons-tabbar swipeable position="auto"&gt;
        &lt;ons-tab page="tab1.html" label="首页" icon="md-home" active&gt;&lt;/ons-tab&gt;
        &lt;ons-tab page="tab2.html" label="搜索" icon="md-search"&gt;&lt;/ons-tab&gt;
        &lt;ons-tab page="tab3.html" label="通知" icon="md-notifications" badge="5"&gt;&lt;/ons-tab&gt;
        &lt;ons-tab page="tab4.html" label="我的" icon="md-account-circle"&gt;&lt;/ons-tab&gt;
    &lt;/ons-tabbar&gt;

    &lt;!-- Tab 1: 首页 --&gt;
    &lt;template id="tab1.html"&gt;
        &lt;ons-page&gt;
            &lt;div style="padding: 20px; text-align: center;"&gt;
                &lt;p style="margin-top: 50px;"&gt;
                    &lt;ons-icon icon="md-home" size="80px" style="color: #4a90e2;"&gt;&lt;/ons-icon&gt;
                &lt;/p&gt;
                &lt;h2&gt;首页&lt;/h2&gt;
                &lt;p style="color: #666; margin-top: 20px;"&gt;
                    这是首页标签的内容。
                &lt;/p&gt;
                &lt;p style="margin-top: 30px;"&gt;
                    &lt;ons-button onclick="showTabToast('首页')"&gt;点击测试&lt;/ons-button&gt;
                &lt;/p&gt;
            &lt;/div&gt;
        &lt;/ons-page&gt;
    &lt;/template&gt;

    &lt;!-- Tab 2: 搜索 --&gt;
    &lt;template id="tab2.html"&gt;
        &lt;ons-page&gt;
            &lt;div style="padding: 20px;"&gt;
                &lt;h3&gt;搜索&lt;/h3&gt;
                &lt;p style="margin: 20px 0;"&gt;
                    &lt;ons-search-input placeholder="搜索内容..."&gt;&lt;/ons-search-input&gt;
                &lt;/p&gt;
                &lt;ons-list&gt;
                    &lt;ons-list-header&gt;搜索历史&lt;/ons-list-header&gt;
                    &lt;ons-list-item tappable&gt;
                        &lt;div class="left"&gt;
                            &lt;ons-icon icon="md-history"&gt;&lt;/ons-icon&gt;
                        &lt;/div&gt;
                        &lt;div class="center"&gt;搜索记录 1&lt;/div&gt;
                    &lt;/ons-list-item&gt;
                    &lt;ons-list-item tappable&gt;
                        &lt;div class="left"&gt;
                            &lt;ons-icon icon="md-history"&gt;&lt;/ons-icon&gt;
                        &lt;/div&gt;
                        &lt;div class="center"&gt;搜索记录 2&lt;/div&gt;
                    &lt;/ons-list-item&gt;
                    &lt;ons-list-item tappable&gt;
                        &lt;div class="left"&gt;
                            &lt;ons-icon icon="md-history"&gt;&lt;/ons-icon&gt;
                        &lt;/div&gt;
                        &lt;div class="center"&gt;搜索记录 3&lt;/div&gt;
                    &lt;/ons-list-item&gt;
                &lt;/ons-list&gt;
            &lt;/div&gt;
        &lt;/ons-page&gt;
    &lt;/template&gt;

    &lt;!-- Tab 3: 通知 --&gt;
    &lt;template id="tab3.html"&gt;
        &lt;ons-page&gt;
            &lt;div style="padding: 20px;"&gt;
                &lt;h3&gt;通知中心&lt;/h3&gt;
                &lt;ons-list style="margin-top: 20px;"&gt;
                    &lt;ons-list-item&gt;
                        &lt;div class="center"&gt;
                            &lt;span class="list-item__title"&gt;系统通知&lt;/span&gt;
                            &lt;span class="list-item__subtitle"&gt;您有新的系统消息&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class="right"&gt;
                            &lt;span style="color: #4a90e2; font-size: 12px;"&gt;刚刚&lt;/span&gt;
                        &lt;/div&gt;
                    &lt;/ons-list-item&gt;
                    &lt;ons-list-item&gt;
                        &lt;div class="center"&gt;
                            &lt;span class="list-item__title"&gt;更新提醒&lt;/span&gt;
                            &lt;span class="list-item__subtitle"&gt;发现新版本可用&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class="right"&gt;
                            &lt;span style="color: #999; font-size: 12px;"&gt;1小时前&lt;/span&gt;
                        &lt;/div&gt;
                    &lt;/ons-list-item&gt;
                    &lt;ons-list-item&gt;
                        &lt;div class="center"&gt;
                            &lt;span class="list-item__title"&gt;活动通知&lt;/span&gt;
                            &lt;span class="list-item__subtitle"&gt;新活动即将开始&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class="right"&gt;
                            &lt;span style="color: #999; font-size: 12px;"&gt;2小时前&lt;/span&gt;
                        &lt;/div&gt;
                    &lt;/ons-list-item&gt;
                    &lt;ons-list-item&gt;
                        &lt;div class="center"&gt;
                            &lt;span class="list-item__title"&gt;好友消息&lt;/span&gt;
                            &lt;span class="list-item__subtitle"&gt;张三给你发送了一条消息&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class="right"&gt;
                            &lt;span style="color: #999; font-size: 12px;"&gt;昨天&lt;/span&gt;
                        &lt;/div&gt;
                    &lt;/ons-list-item&gt;
                    &lt;ons-list-item&gt;
                        &lt;div class="center"&gt;
                            &lt;span class="list-item__title"&gt;评论回复&lt;/span&gt;
                            &lt;span class="list-item__subtitle"&gt;有人回复了你的评论&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;div class="right"&gt;
                            &lt;span style="color: #999; font-size: 12px;"&gt;2天前&lt;/span&gt;
                        &lt;/div&gt;
                    &lt;/ons-list-item&gt;
                &lt;/ons-list&gt;
            &lt;/div&gt;
        &lt;/ons-page&gt;
    &lt;/template&gt;

    &lt;!-- Tab 4: 我的 --&gt;
    &lt;template id="tab4.html"&gt;
        &lt;ons-page&gt;
            &lt;div style="padding: 20px;"&gt;
                &lt;!-- 用户头像 --&gt;
                &lt;div style="text-align: center; padding: 30px 0;"&gt;
                    &lt;div style="width: 100px; height: 100px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center;"&gt;
                        &lt;ons-icon icon="md-account-circle" style="color: white; font-size: 60px;"&gt;&lt;/ons-icon&gt;
                    &lt;/div&gt;
                    &lt;h3 style="margin-top: 15px;"&gt;用户名称&lt;/h3&gt;
                    &lt;p style="color: #666;"&gt;user@example.com&lt;/p&gt;
                &lt;/div&gt;

                &lt;!-- 设置列表 --&gt;
                &lt;ons-list style="margin-top: 20px;"&gt;
                    &lt;ons-list-item tappable&gt;
                        &lt;div class="left"&gt;
                            &lt;ons-icon icon="md-account-circle"&gt;&lt;/ons-icon&gt;
                        &lt;/div&gt;
                        &lt;div class="center"&gt;个人信息&lt;/div&gt;
                        &lt;div class="right"&gt;
                            &lt;ons-icon icon="md-chevron-right"&gt;&lt;/ons-icon&gt;
                        &lt;/div&gt;
                    &lt;/ons-list-item&gt;
                    &lt;ons-list-item tappable&gt;
                        &lt;div class="left"&gt;
                            &lt;ons-icon icon="md-settings"&gt;&lt;/ons-icon&gt;
                        &lt;/div&gt;
                        &lt;div class="center"&gt;设置&lt;/div&gt;
                        &lt;div class="right"&gt;
                            &lt;ons-icon icon="md-chevron-right"&gt;&lt;/ons-icon&gt;
                        &lt;/div&gt;
                    &lt;/ons-list-item&gt;
                    &lt;ons-list-item tappable&gt;
                        &lt;div class="left"&gt;
                            &lt;ons-icon icon="md-help"&gt;&lt;/ons-icon&gt;
                        &lt;/div&gt;
                        &lt;div class="center"&gt;帮助与反馈&lt;/div&gt;
                        &lt;div class="right"&gt;
                            &lt;ons-icon icon="md-chevron-right"&gt;&lt;/ons-icon&gt;
                        &lt;/div&gt;
                    &lt;/ons-list-item&gt;
                    &lt;ons-list-item tappable&gt;
                        &lt;div class="left"&gt;
                            &lt;ons-icon icon="md-info"&gt;&lt;/ons-icon&gt;
                        &lt;/div&gt;
                        &lt;div class="center"&gt;关于&lt;/div&gt;
                        &lt;div class="right"&gt;
                            &lt;ons-icon icon="md-chevron-right"&gt;&lt;/ons-icon&gt;
                        &lt;/div&gt;
                    &lt;/ons-list-item&gt;
                &lt;/ons-list&gt;

                &lt;!-- 退出按钮 --&gt;
                &lt;p style="margin-top: 30px; text-align: center;"&gt;
                    &lt;ons-button modifier="large--quiet" onclick="logout()"&gt;退出登录&lt;/ons-button&gt;
                &lt;/p&gt;
            &lt;/div&gt;
        &lt;/ons-page&gt;
    &lt;/template&gt;
&lt;/ons-page&gt;


&lt;!-- ==================== JavaScript ==================== --&gt;
&lt;script&gt;
// Tab 测试函数
function showTabToast(tabName) {
    ons.notification.toast('当前在 ' + tabName + ' 标签', {
        timeout: 1500
    });
}

// 退出登录
function logout() {
    ons.notification.confirm({
        message: '确定要退出登录吗？',
        title: '退出',
        buttonLabels: ['取消', '确定'],
        callback: function(index) {
            if (index === 1) {
                ons.notification.toast('已退出登录', { timeout: 1500 });
            }
        }
    });
}
&lt;/script&gt;

&lt;!-- 属性说明 --&gt;
&lt;!-- swipeable: 允许左右滑动切换标签 --&gt;
&lt;!-- position: 标签栏位置 (auto/top/bottom) --&gt;
&lt;!-- active: 默认激活的标签 --&gt;
&lt;!-- badge: 显示徽章数字 --&gt;</code></pre>
                        </div>
                    </div>
                </div>
            </div>
        </ons-page>
    </template>

    <template id="tab2.html">
        <ons-page>
            <div style="padding: 20px;">
                <h3>搜索</h3>
                <p style="margin: 20px 0;">
                    <ons-search-input placeholder="搜索内容..." id="searchInput"></ons-search-input>
                </p>
                <ons-list>
                    <ons-list-header>搜索历史</ons-list-header>
                    <ons-list-item tappable>
                        <div class="left">
                            <ons-icon icon="md-history"></ons-icon>
                        </div>
                        <div class="center">搜索记录 1</div>
                    </ons-list-item>
                    <ons-list-item tappable>
                        <div class="left">
                            <ons-icon icon="md-history"></ons-icon>
                        </div>
                        <div class="center">搜索记录 2</div>
                    </ons-list-item>
                    <ons-list-item tappable>
                        <div class="left">
                            <ons-icon icon="md-history"></ons-icon>
                        </div>
                        <div class="center">搜索记录 3</div>
                    </ons-list-item>
                </ons-list>
            </div>
        </ons-page>
    </template>

    <template id="tab3.html">
        <ons-page>
            <div style="padding: 20px;">
                <h3>通知中心</h3>
                <ons-list style="margin-top: 20px;">
                    <ons-list-item>
                        <div class="center">
                            <span class="list-item__title">系统通知</span>
                            <span class="list-item__subtitle">您有新的系统消息</span>
                        </div>
                        <div class="right">
                            <span style="color: #4a90e2; font-size: 12px;">刚刚</span>
                        </div>
                    </ons-list-item>
                    <ons-list-item>
                        <div class="center">
                            <span class="list-item__title">更新提醒</span>
                            <span class="list-item__subtitle">发现新版本可用</span>
                        </div>
                        <div class="right">
                            <span style="color: #999; font-size: 12px;">1小时前</span>
                        </div>
                    </ons-list-item>
                    <ons-list-item>
                        <div class="center">
                            <span class="list-item__title">活动通知</span>
                            <span class="list-item__subtitle">新活动即将开始</span>
                        </div>
                        <div class="right">
                            <span style="color: #999; font-size: 12px;">2小时前</span>
                        </div>
                    </ons-list-item>
                    <ons-list-item>
                        <div class="center">
                            <span class="list-item__title">好友消息</span>
                            <span class="list-item__subtitle">张三给你发送了一条消息</span>
                        </div>
                        <div class="right">
                            <span style="color: #999; font-size: 12px;">昨天</span>
                        </div>
                    </ons-list-item>
                    <ons-list-item>
                        <div class="center">
                            <span class="list-item__title">评论回复</span>
                            <span class="list-item__subtitle">有人回复了你的评论</span>
                        </div>
                        <div class="right">
                            <span style="color: #999; font-size: 12px;">2天前</span>
                        </div>
                    </ons-list-item>
                </ons-list>
            </div>
        </ons-page>
    </template>

    <template id="tab4.html">
        <ons-page>
            <div style="padding: 20px;">
                <div style="text-align: center; padding: 30px 0;">
                    <div style="width: 100px; height: 100px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center;">
                        <ons-icon icon="md-account-circle" style="color: white; font-size: 60px;"></ons-icon>
                    </div>
                    <h3 style="margin-top: 15px;">用户名称</h3>
                    <p style="color: #666;">user@example.com</p>
                </div>

                <ons-list style="margin-top: 20px;">
                    <ons-list-item tappable>
                        <div class="left">
                            <ons-icon icon="md-account-circle"></ons-icon>
                        </div>
                        <div class="center">个人信息</div>
                        <div class="right">
                            <ons-icon icon="md-chevron-right"></ons-icon>
                        </div>
                    </ons-list-item>
                    <ons-list-item tappable>
                        <div class="left">
                            <ons-icon icon="md-settings"></ons-icon>
                        </div>
                        <div class="center">设置</div>
                        <div class="right">
                            <ons-icon icon="md-chevron-right"></ons-icon>
                        </div>
                    </ons-list-item>
                    <ons-list-item tappable>
                        <div class="left">
                            <ons-icon icon="md-help"></ons-icon>
                        </div>
                        <div class="center">帮助与反馈</div>
                        <div class="right">
                            <ons-icon icon="md-chevron-right"></ons-icon>
                        </div>
                    </ons-list-item>
                    <ons-list-item tappable>
                        <div class="left">
                            <ons-icon icon="md-info"></ons-icon>
                        </div>
                        <div class="center">关于</div>
                        <div class="right">
                            <ons-icon icon="md-chevron-right"></ons-icon>
                        </div>
                    </ons-list-item>
                </ons-list>

                <p style="margin-top: 30px; text-align: center;">
                    <ons-button modifier="large--quiet" onclick="logout()">退出登录</ons-button>
                </p>
            </div>
        </ons-page>
    </template>

    <script>
        function showTabToast(tabName) {
            ons.notification.toast('当前在 ' + tabName + ' 标签', {
                timeout: 1500
            });
        }

        function logout() {
            ons.notification.confirm({
                message: '确定要退出登录吗？',
                title: '退出',
                buttonLabels: ['取消', '确定'],
                callback: function(index) {
                    if (index === 1) {
                        ons.notification.toast('已退出登录', { timeout: 1500 });
                    }
                }
            });
        }
    </script>
    <script src="../js/code-display.js"></script>
</ons-page>
